<template>
    <div>
       <ul class="lineBox">
            <li v-for="(item,index) in allShop" class="line" :key="index" >
                <div @click="goShop(item,index)" style="height: 100%;">
                    <span style="font-size: 12px; float: left;">场地{{ index+1>9?"0"+(index+1):"00"+(index+1) }}:</span>
                <div v-if="!item.isFull" class="btnBox">
                    <!-- 这里还要判读一次看看是不是商户,如果不是商户显示空摊位 -->
                    <button class="btn" @click.stop="changeShow(index+1)" v-if="$store.state.user.categary === '商家'">我要预约</button>
                    <span v-else class="kongBox">空摊位</span>
                </div>
                <div v-else style="padding-top: 15px;" class="shopBox">
                    <p class="onewarp"> 介绍 : {{ item.s_content }}</p>
                    <p> 类型 : {{ item.s_type }}</p>
                    <p class="onewarp"> 价格 : {{ item.s_price }}</p>
                    <div v-if="item.s_name === $store.state.user.username" class="changeShop" @click.stop="changeAllCenter(item,index+1)">
                        <button>修改活动内容</button>
                    </div>
                </div>
                </div>
            </li>
       </ul>
       <Pop v-if="isShow" :changeShow="changeShow" :areaNum="areaNum" :allCenter="undefined"></Pop>
       <Pop v-if="allCenterShow" :changeShow="changeAllCenterShow" :areaNum="areaNum" :allCenter="allCenter"></Pop>
    </div>  
</template>

<script>
    import{ mapState }from 'vuex'
    import Pop from '../Pop/index.vue'
    export default {
        data() {
            return {
                isShow:false,
                areaNum:0,
                allCenterShow:false,
                allCenter:{},
            }
        },
        components:{
            Pop,
        },
        computed:{
            ...mapState({"allShop":state=>state.allShop})
        },
    methods:{
        goShop(item,index){
            if(!this.allShop[index].isFull || item.s_content === "官方占用") return
            this.$router.push('/shopdetails/'+item.placeid)
        },
        changeShow(index){
            // 判断商户是否已经租聘
            if(this.$store.getters.userShop){
                this.$message({
                    message: "您已经预约了场地,不可以重复预约!!",
                    type: 'warning'
           });
           return
            } 
            this.areaNum = index>9?"0"+index : "00"+index
            this.isShow = !this.isShow
        },
        changeAllCenterShow(){
            this.allCenterShow = !this.allCenterShow
        },
        changeAllCenter(item,index){
            this.areaNum = index>9?"0"+index : "00"+index
            this.allCenter = item
            this.allCenterShow = !this.allCenterShow
        }
        
    }
}
</script>

<style lang="scss" scoped>
li {
    position: relative;
    box-sizing: border-box;
    list-style: none;
    width: 33%;
    border: 2px solid #666;
    margin:0px 0px -2px -2px;
    height: 100px;
    cursor: pointer;
    overflow: hidden;
}
.lineBox {
    padding-top: 50px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 820px;
}
.btnBox{
    position: relative;
    height: 100%;
    .btn {
        position: absolute;
        width: 50%;
        height: 70%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: pink;
        cursor: pointer;
    }
    
}
.shopBox {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    &>:first-child{
        color: red;
        margin-bottom: 5px;
        font-weight: 700;
    }
    &>:nth-child(2){
       margin-bottom: 5px;
    }
    &:hover{
        .changeShop{
            display: block;
        }
    }
    p {
        text-indent: 3em;
    }
    .changeShop {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        width: 266.59px;
        height: 96px;
        background-color: rgba(0, 0, 0, 0.3);
             button {
                position: absolute;
                width: 50%;
                height: 70%;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                background-color: pink;
                cursor: pointer;
        }
}
}
.onewarp {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kongBox{
    float: left;
    margin-top: 35px;
    margin-left: 40px;
}
</style>